<template>
  <div>
    <div class="base_header" style="text-align: left;margin-bottom: 20px">
      <span style="font-size: 30px;font-weight: normal;">
        广告管理
      </span>
      <span style="font-size: 10px">课程分类管理</span>
      <el-button type="success"
                 style="float: right"
                 @click="handleAdd"
      >新增</el-button>
    </div>
    <el-table
      :data="adList"
      style="width: 100%">
      <el-table-column
        label="序号"
        width="80">
        <template slot-scope="scope">
          <span>
            {{scope.$index+1}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="time"
        label="创建时间">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="handleDelete(scope.row)"
            >
              <el-button
                size="mini"
                slot="reference"
                type="danger"
              >删除</el-button>
            </el-popconfirm>
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      style="margin-top: 30px"
      :title="title"
      :visible.sync="dialogVisible"
      :with-header="true">
      <div style="padding:0px 20px">
        <el-form v-model="adObj" label-position="left" label-width="100px">
          <el-form-item label="名称">
            <el-input v-model="adObj.title"></el-input>
          </el-form-item>
          <el-form-item label="连接地址">
            <el-input v-model="adObj.url"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <div style="margin-bottom: 10px">
              <el-upload
                class="upload_div"
                :auto-upload="true"
                action=""
                :show-file-list="false"
                :http-request="fileUpload"
                style="display: inline-block"
                :multiple="false">
                <el-button type="" v-loading="uploading">
                  <span>点击修改</span>
                </el-button>
              </el-upload>
            </div>
            <div >
              <el-image :src="adObj.image"
                        :preview-src-list="[adObj.image]"
                        style="width: 300px;height: 160px"
                        fit="fill"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="创建时间" v-if="type==2">
            <el-input v-model="adObj.time" disabled></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="success"  @click="saveAD()">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'ADManage',
  data () {
    return {
      adList: [],
      adData: {},
      dialogVisible: false,
      adObj: {},
      // 1 新增 2编辑
      type: 2,
      title: '新增',
      uploading: false
    }
  },
  mounted () {
    this.getListAD()
  },
  methods: {
    getListAD () {
      var _this = this
      this.$axios.post('/api/ad/getListAD')
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.adList = result.result
          }
        })
    },
    handleDelete (row) {
      var _this = this
      this.$axios.post('/api/ad/deleteAD',
        this.$qs.stringify({
          adData: JSON.stringify(row)
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '删除成功',
              offset: 50
            })
            _this.getListAD()
          } else {
            _this.$message({
              type: 'error',
              message: '失败，请重试!',
              offset: 50
            })
          }
        })
    },
    handleEdit (row) {
      this.type = 2
      this.title = '编辑'
      this.adObj = row
      this.dialogVisible = true
    },
    handleAdd () {
      this.type = 1
      this.title = '新增'
      this.adObj = {}
      this.dialogVisible = true
    },
    saveAD () {
      var _this = this
      if (this.type === 2) {
        this.$axios.post('/api/ad/updateAD',
          this.$qs.stringify({
            'adData': JSON.stringify(this.adObj)
          })
        ).then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '成功',
              offset: 50
            })
            _this.dialogVisible = false
            _this.getListAD()
          } else {
            _this.$message({
              type: 'error',
              message: '失败',
              offset: 50
            })
          }
        })
      } else {
        // 新增
        this.$axios.post('/api/ad/add',
          this.$qs.stringify({
            'adData': JSON.stringify(this.adObj)
          })
        ).then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '成功',
              offset: 50
            })
            _this.dialogVisible = false
            _this.getListAD()
          } else {
            _this.$message({
              type: 'error',
              message: '失败',
              offset: 50
            })
          }
        })
      }
    },
    async fileUpload (file) {
      this.uploading = true
      var _this = this
      var host = this.$store.state.ossData.host
      var response = this.$Utils.getSignature('image')
      var requestData = new FormData()
      await response.then(res => {
        requestData = this.$Utils.fileUpload(file.file, res)
      })
      await this.$axios.post(host, requestData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
          file.onProgress({percent: complete})
        }
      })
        .then(function (response) {
          // eslint-disable-next-line eqeqeq
          if (response.status == 200) {
            _this.adObj.image = host + '/' + requestData.get('key')
          }
          _this.uploading = false
        })
        .catch(function () {
          _this.uploading = false
        })
    }
  }
}
</script>

<style scoped>

</style>
